/*
 * @Descripttion: $0
 * @version: 
 * @Author: linPing
 * @Date: 2019-10-29 09:40:09
 * @LastEditTime: 2019-11-01 13:32:39
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Fragment } from 'react';

import { observer, inject } from 'mobx-react';
import NavigationBar from '../common/NavigationBar';
import GlobalStyles from "../res/styles/GlobalStyles";
import NavigationUtil from '../navigator/NavigationUtil'
import Img from '../common/Images'
import ViewUtil from "../util/ViewUtil";
import Feather from 'react-native-vector-icons/Feather'
import Ionicons from 'react-native-vector-icons/Ionicons'
import px2dp from '../util'
import {
  SafeAreaView,
  StyleSheet,
  Dimensions,
  ScrollView,
  Button,
  View,
  Image,
  Text,
  TouchableOpacity,
  RefreshControl,
  StatusBar,
} from 'react-native';

const window = Dimensions.get('window');
@inject('appStore')
@observer
export default class HomePage extends React.Component {
  constructor(props) {
    super(props)
    this.appStore = this.props.appStore
    this.state = {
      isLoading: false, //下拉刷新loading
      taskTotal: 2,
      recordTotal: 2,
      reftifyTotal: 6,
      roomTotal: 50,
      hiddenDangerTotal: 103
    }
  }
  /*
   *@Description: 加载数据
   *@param: refreshing {true:"下拉刷新",false:'上拉加载'}
   *@return: 
  */
  loadData(refreshing) {
    this.setState({
      isLoading: true
    })
    setTimeout(() => { //模拟回掉
      this.setState({
        isLoading: false
      })

    }, 1000)
  }
  render() {
    const { navigation } = this.props
    let themeColor = this.props.appStore.theme
    let statusBar = {
      backgroundColor: themeColor,
      barStyle: 'light-content',
    };
    let navigationBar =
      <NavigationBar
        title={'LabVision'}
        statusBar={statusBar}
        style={{ backgroundColor: themeColor }}
      />;
    return (

      <View style={GlobalStyles.root_container}>
        {navigationBar}
        <ScrollView
          refreshControl={
            <RefreshControl
              title={'Loading'}
              refreshing={this.state.isLoading}
              onRefresh={() => {
                this.loadData(true)
              }}
            />
          }
        >
          <View style={{}}>
            <View>
              <Image
                source={Img.Home.banner}
                style={{ width: window.width, resizeMode: 'cover', height: 170 }}
              />
            </View>
            <View style={{ position: "absolute", top: 30, left: 30 }}>
              <Text style={{ color: '#fff', fontSize: 26, marginBottom: 10, fontWeight: '100' }}>致力打造高等学校</Text>
              <Text style={{ color: '#fff', fontSize: 26, fontWeight: 'bold' }}>安全实验室</Text>
            </View>
          </View>

          <View style={styles.container}>

            {/* 我的检查 */}
            <View style={styles.cardBox}>
              <Text style={styles.title}>我的检查</Text>
              <View style={GlobalStyles.line} />


              <View style={styles.checkItemContainer}>
   
                <TouchableOpacity
                  onPress={() => {
                    NavigationUtil.goPage({ ...this.appStore }, 'TaskPage')
                  }}
                >
                  <View style={styles.checkItem}>
                    <Image
                      source={Img.Home.iconTask}
                      style={styles.itemImg}
                    />
                    <Text style={styles.itemTitle}>检查任务</Text>
                    <View style={styles.itemDesc}>
                      <Text style={styles.itemDescText}>待完成</Text>
                      <Text style={styles.itemDescNum}>{this.state.taskTotal}</Text>
                    </View>
                  </View>
                </TouchableOpacity>

                <TouchableOpacity
                  onPress={() => {
                    NavigationUtil.goPage({ ...this.appStore }, 'TaskCheck')
                  }}
                >
                  <View style={styles.checkItem}>
                    <Image
                      source={Img.Home.iconRecord}
                      style={styles.itemImg}
                    />
                    <Text style={styles.itemTitle}>检查记录</Text>
                    <View style={styles.itemDesc}>
                      <Text style={styles.itemDescText}>未提交</Text>
                      <Text style={styles.itemDescNum}>{this.state.recordTotal}</Text>
                    </View>
                  </View>
                </TouchableOpacity>

                <TouchableOpacity>
                  <View style={styles.checkItem}>
                    <Image
                      source={Img.Home.iconReftify}
                      style={styles.itemImg}
                    />
                    <Text style={styles.itemTitle}>整改记录</Text>
                    <View style={styles.itemDesc}>
                      <Text style={styles.itemDescText}>待复查</Text>
                      <Text style={styles.itemDescNum}>{this.state.reftifyTotal}</Text>
                    </View>
                  </View>
                </TouchableOpacity>

              </View>
            </View>
            {/* 扫码检查 */}

            <View style={styles.cardBox}>

              <View style={styles.entryContainer}>
                <TouchableOpacity style={[styles.btnItem, styles.sweepCode]}>
                  <View style={styles.row}>
                    <Ionicons
                      name={'ios-qr-scanner'}
                      size={14}
                      style={{ color: '#3d8cff', marginRight: 5 }}

                    />
                    <Text style={styles.btnText}>扫码检查</Text>
                  </View>
                </TouchableOpacity>
                <TouchableOpacity style={[styles.btnItem, styles.startInspection]}>
                  <View style={styles.row}>
                    <Feather
                      name={'plus'}
                      size={14}
                      style={{ color: '#fff', marginRight: 5 }}
                    />
                    <Text style={styles.btnTextBlue}>发起检查</Text>
                  </View>
                </TouchableOpacity>
              </View>


            </View>


            {/* 统计数据 */}
            <View style={styles.cardBox}>
              <Text style={styles.title}>统计数据</Text>
              <View style={GlobalStyles.line} />


              <View style={styles.checkItemContainer}>

                <TouchableOpacity>
                  <View style={styles.checkItem}>
                    <View style={styles.countWrap}>
                      <Text style={[styles.countNum, styles.countNumBlue]}>{this.state.roomTotal}</Text>
                      <Text style={styles.unit}>个</Text>
                    </View>
                    <Text style={styles.itemTitle}>检查任务</Text>
                    <View style={styles.itemDesc}>
                      <Text style={styles.itemDescText}>去查看 ></Text>
                      {/* <Text style={styles.itemDescNum}>2</Text> */}
                    </View>
                  </View>
                </TouchableOpacity>

                <TouchableOpacity>
                  <View style={styles.checkItem}>
                    <View style={styles.countWrap}>
                      <Text style={[styles.countNum, styles.countNumPink]}>{this.state.hiddenDangerTotal}</Text>
                      <Text style={styles.unit}>项</Text>
                    </View>
                    <Text style={styles.itemTitle}>检查记录</Text>
                    <View style={styles.itemDesc}>
                      <Text style={styles.itemDescText}>去查看 ></Text>
                      {/* <Text style={styles.itemDescNum}>2</Text> */}
                    </View>
                  </View>
                </TouchableOpacity>


              </View>
            </View>

            <View style={styles.footer}>
              <Text style={styles.footerDesc}>让实验室更安全 | 让实验更专注</Text>
            </View>

          </View>
        </ScrollView>

      </View>
    )
  }

};

const styles = StyleSheet.create({

  container: {
    flex: 1,
    padding: 10
  },
  row: {
    flexDirection: "row",
    alignItems: "center"
  },
  cardBox: {
    padding: 10,
    marginBottom: 10,
    backgroundColor: "#fff",
    borderRadius: 4,
    shadowColor: 'gray',
    shadowOffset: { width: 1, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 1,
    elevation: 2
  },
  title: {
    marginBottom: 10,

  },
  checkItemContainer: {
    padding: 2,
    paddingVertical: 20,
    justifyContent: "space-around",
    flexDirection: "row"
  },
  checkItem: {
    alignItems: 'center'
  },
  itemDesc: {
    flexDirection: "row"
  },
  itemTitle: {
    color: "#333",
    marginBottom: 4,
    fontSize: 14
  },
  itemDescText: {
    color: '#999',
    marginRight: 5,
    fontSize: 12
  },
  itemDescNum: {
    color: '#333',
    fontSize: 12
  },
  itemImg: {
    marginBottom: 10,
    width: px2dp(25),
    height: px2dp(25)
  },
  countWrap: {
    flexDirection: 'row',
    alignItems: "center"
  },
  countNum: {
    fontSize: 32,
  },
  countNumBlue: {
    color: '#3D91FF',
  },
  countNumPink: {
    color: '#FFABAB',
  },
  unit: {
    paddingTop: 10
  },
  footer: {
    marginVertical: 5,
    alignItems: 'center'
  },
  footerDesc: {
    color: '#b0bed4',
    fontSize: 10
  },
  entryContainer: { flexDirection: "row" },
  btnItem: {
    width: 52,
    padding: 8,
    margin: 12,
    flex: 1,
    alignItems: 'center',
    backgroundColor: "#3d8cff",
    borderRadius: 4
  },
  btnText: {
    color: '#3d8cff'
  },
  btnTextBlue: {
    color: '#fff'
  },
  sweepCode: {
    backgroundColor: "#e8f3ff",
    borderWidth: 0.5,
    borderColor: "#3d8cff"
  },
  startInspection: {}


});

